{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{ import "/_libs/forms" }}

{{- block title() -}}User Interface{{- end -}}

{{ block mainContent() }}<div class="max-w-2xl">

<h1 class="title text-h2">User Interface</h1>

<h2 class="title text-h3">Buttons</h2>

<div class="grid grid-cols-3 gap-8 mb-8">
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn">Click Me!</button>
    btn
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-primary">Click Me!</button>
    btn-primary
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-danger">Click Me!</button>
    btn-danger
  </div>

  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined">Click Me!</button>
    btn-outlined
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined-primary">Click Me!</button>
    btn-outlined-primary
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined-danger">Click Me!</button>
    btn-outlined-danger
  </div>
</div>

<hr class="my-8">

<h2 class="title text-h3">Messages</h2>

{{- yield message() content -}}
Simple information message
{{- end -}}

{{- yield message(type="success") content -}}
<p>Success message with 2 paragraphs</p>
<p>You did it!</p>
{{- end -}}

{{- yield message(type="error") content -}}
<p>Error message</p>
<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>
{{- end -}}

{{- yield message(removable=true) content -}}
Removable message
{{- end -}}

{{- yield message() content -}}
<p class="flex items-center">
  <span class="flex-grow">Message with a call to action</span>
  <button class="btn-primary" name="cancel" value="1">Cancel</button>
</p>
{{- end -}}

<hr class="my-8">

<h2 class="title text-h3">Form Fields</h2>

{{ yield textField(
  field=.Form.Get("text"),
  label="Text Field",
  class="field-h",
) }}

{{ yield textField(
  field=.Form.Get("text"),
  name="required",
  required=true,
  label="Required Field",
  class="field-h",
) }}

{{ yield passwordField(
  field=.Form.Get("text"),
  name="password",
  label="Password Field",
  class="field-h",
  inputAttrs=attrList("autocomplete", "off"),
) }}

{{ yield dateField(
  field=.Form.Get("text"),
  name="date",
  label="Date Field",
  class="field-h",
) }}

{{ yield selectField(
  field=.Form.Get("select"),
  name="select",
  label="Select",
  class="field-h"
) }}

{{ yield multiSelectField(
  field=.Form.Get("choices"),
  name="checkboxes",
  label="Checkboxes",
  class="field-h",
) }}

{{ yield multiSelectField(
  field=.Form.Get("choices"),
  name="radio",
  type="radio",
  label="Radio",
  class="field-h",
) }}

{{ yield formField(
  field=.Form.Get("text"),
  name="file",
  label="File Field",
  class="field-h",
) content }}
  <input type="file" name="file" id="file">
{{ end }}

<hr class="my-8">

<h2 class="title text-h3">Form with errors</h2>

{{- yield formErrors(form=.FormErr) -}}

{{ yield textField(
  field=.FormErr.Get("text"),
  name="err-text",
  label="Text Field",
  class="field-h",
) }}

{{ yield multiSelectField(
  field=.FormErr.Get("choices"),
  name="err-checkboxes",
  label="Checkboxes",
  class="field-h",
) }}

</div>{{ end }}
